<template>
	<view class="">
		<view class="active_wrap1">
			<view class="HMSM">
				<view class="box-bg" v-for="(block, inblock) in shaftList" :key="inblock">
					<!-- 奖品列表 -->
					<view class="box" :style="{
						transform: 'translate3d(' + translateX[inblock] + 'px,0, 0)',
						'transition-duration': duration + 'ms',
					}">
						<view v-for="(item, index) in block" :key="index" class="box_item">
							<image :src="item.image" mode="aspectFit"></image>
							<view class="border_t" v-if="item.level_id == '1'"
								style="background-image: url('https://morgan.dingxians.cn/static/uniPic/01.png');background-size: 100% 100%;">
							</view>
							<view class="border_t" v-if="item.level_id == '2'"
								style="background-image: url('https://morgan.dingxians.cn/static/uniPic/02.png');background-size: 100% 100%;">
							</view>
							<view class="border_t" v-if="item.level_id == '3'"
								style="background-image: url('https://morgan.dingxians.cn/static/uniPic/03.png');background-size: 100% 100%;">
							</view>
							<view class="border_t" v-if="item.level_id == '4'"
								style="background-image: url('https://morgan.dingxians.cn/static/uniPic/04.png');background-size: 100% 100%;">
							</view>
						</view>
					</view>
				</view>

				<view class="line">
					<image src="https://morgan.dingxians.cn/static/draw/05.png" mode="heightFix" />
				</view>
			</view>
			<image class="draw-mask" src="https://morgan.dingxians.cn/static/draw/5.png" mode="scaleToFill" />
		</view>
	</view>
</template>
<script>
export default {
	props: ['devicePixelRatio'],
	data() {
		return {
			//每个盒子宽度
			boxWidth: 0,
			//线的高度
			lineHeight: 0,
			//类型三发或者五发
			type: 5, //默认三发
			// 位置
			translateX: [0, 0, 0, 0, 0],
			// 总的摇奖时间 单位毫秒
			duration: 8000,
			//奖品列表
			textList: [],
			shaftList: [],
			// 结果列表
			resultsList: [],

			// 是否开奖
			isStart: false,
			// 跳转结果页面定时器
			timer: null,
			// 开始抽奖时间
			timers: null,

			// 每个奖品生成的长度
			prizeListLen: 50,
			// 是否越过动画，直接查看结果
			isShowResult: false,
		}
	},
	watch: {
		boxWidth(newValue) {
			if (newValue > 0) {
				if (this.isStart) {
					this.start()
				}
			}
		},
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		getWidth() {
			let query = uni.createSelectorQuery().in(this)
			let dom = query.select('.box_item')
			dom
				.boundingClientRect((data) => {
					if (!data || !data.length) {
						// (690rpx - 40px) / 5
						this.boxWidth = (uni.upx2px(690) - 40) / 5
						console.log("data1: ", this.boxWidth)
					} else {
						this.boxWidth = data.width
						console.log("data2: ", this.boxWidth)
					}
				})
				.exec()
		},
		//随机数据
		init() {
			let arr = []
			for (let i = 0; i < this.type; i++) {
				let arr1 = []
				for (let j = 0; j < this.prizeListLen; j++) {
					let index = Math.trunc(Math.random() * this.textList.length)
					let text = this.textList[index]
					arr1.push(text)
				}
				arr.push(arr1)
			}
			this.shaftList = arr
			this.$nextTick(() => {
				this.getWidth()
			})
		},
		//开始抽奖
		start() {
				let that = this
				if (that.isShowResult) {
					return
				}
				this.findPro(this.resultsList)
				let url = 'https://www.dingxians.cn/app/12750.mp3'
				this.$emit('playVoice', url)
				this.timer = setTimeout(() => {
					this.$emit('start')
				}, 8500)
			},
		clearTimeout2() {
			this.isShowResult = true
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
		},
		//定位结果数据
		findPro(list) {
			let num = this.prizeListLen - 3
			/* this.boxWidth = uni.getStorageSync('boxWidth_5') */
			let translateNum = (this.boxWidth + 10) * (num - 2)
			let translateArr = []
			for (let i = 0; i < this.type; i++) {
				let data = {
					image: list[i].blind_box_prize_image,
					level_id: list[i].level_id,
				}
				this.shaftList[i].splice(num, 1, data)
				translateArr[i] = translateNum * -1
			}
			this.translateX = translateArr
		},
	},
}
</script>
<style lang="scss" scoped>
.active_wrap1 {
	width: 750rpx;
	height: 910rpx;
	// background-image: url('https://mh.qingfentool.vip/upload/image/20230511/d90bcaa6040b2c68eb30abf1000e7014.png');
	// background: red;
	// background-repeat: no-repeat;
	// background-size: 100% 100%;
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		z-index: 2;
		position: absolute;
		left: 30rpx;
		top: 150rpx;
		width: 688rpx;
		height: 900rpx;
		background-size: 100% 100%;
	}

	.draw-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.HMSM {
		z-index: 3;
		position: absolute;
		top: 100rpx;
		left: 35rpx;
		width: 680rpx;
		overflow: hidden;

		.box-bg {
			background-size: 100% 100%;
		}

		.box {
			display: flex;
			align-items: center;
			transition: all cubic-bezier(0.3, 0.1, 0, 1) 0s;
			margin-bottom: 18rpx;
			position: relative;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			.box_item {
				display: flex;
				// align-items: center;
				justify-content: center;
				position: relative;
				width: calc((690rpx - 40px) / 5);
				height: 145rpx;
				// background: #8EC6D1;
				// border: 3rpx solid #1D82C8;
				border-radius: 10rpx;
				margin-right: 10px;
				box-sizing: border-box;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
					height: 100rpx;
					margin-top: calc((116rpx - 12rpx - 90rpx - 3rpx) / 2);
					border-radius: 4rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					z-index: 999;
				}

				.border_t {
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					border-radius: 5rpx;
					height: 100%;
					// transform: rotate(351deg) translateY(0rpx) rotateX(60deg) skewX(345deg);
				}
			}
		}

		.line {
			width: 19rpx;
			height: 780rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;

			image {
				height: 100%;
			}
		}
	}
}

.active_wrap {
	width: 740rpx;
	height: 1130rpx;
	// background-image: url('https://mh.qingfentool.vip/upload/image/20230511/d90bcaa6040b2c68eb30abf1000e7014.png');
	// background-repeat: no-repeat;
	// background-size: 100% 100%;
	// position: relative;
	// overflow: hidden;

	.HMSM {
		margin: 82rpx 0 0;
		overflow: hidden;

		.box {
			display: flex;
			align-items: center;
			transition: all 9s cubic-bezier(0.3, 0.1, 0, 1) 0s;
			margin-bottom: 18rpx;
			position: relative;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			.box_item {
				display: flex;
				// align-items: center;
				justify-content: center;
				position: relative;
				width: calc((720rpx - 40px) / 5);
				height: 186rpx;
				border-radius: 10rpx;
				margin-right: 10px;
				box-sizing: border-box;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
					height: 160rpx;
					margin-top: calc((116rpx - 12rpx - 90rpx - 3rpx) / 2);
					border-radius: 4rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					z-index: 999;
				}

				.border_t {
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					border-radius: 5rpx;
					height: 62rpx;
					// transform: rotate(351deg) translateY(0rpx) rotateX(60deg) skewX(345deg);
				}
			}
		}

		.line {
			width: 19rpx;
			height: 700rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;

			image {
				height: 100%;
			}
		}
	}
}
</style>